<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>报名课程</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="../css/main.css">
	<link rel="stylesheet" href="./css/head.css">
	<link rel="stylesheet" href="../css/window.css">
	<link rel="stylesheet" href="./css/enroll_course.css">
	<script src="/scriptZIP/qrcode.min.js"></script>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>
	<div style="height: 40px;"></div>
	<div class="header">
		<div class="header_title">报名课程</div>
		<img src="../image/return.png" alt="" class="return" onclick="history.back()">
	</div>
	<div id="vue-root" v-cloak>
		<div class="head_title">
			<div class="border-right"></div>
			<div>学生信息</div>
		</div>
		<div class="top_item">
			<img :src="getImg(student.avatar)" alt="">
			<div class="top_item_right">
				<div class="top_item_right_text1">
					<span>未报名</span>{{ student.name }}
				</div>
				<div class="top_item_right_text2">
					手机号：{{ student.phone }}
				</div>
				<div class="top_item_right_text2">
					生日：{{ student.birthday }}
				</div>
				<div class="top_item_right_text2">
					年龄：{{ getAge(student.birthday) }}
				</div>
				<div class="top_item_right_text2">
					跟进状态：{{ getStatusText(student.status) }}
				</div>
				<div class="top_item_right_text2">
					就读学校：{{ student.schoolName }}
				</div>
				<div class="top_item_right_text2">
					家庭地址：{{ student.address }}
				</div>
				<div class="top_item_right_text2">
					学生来源：{{ getSourceText(student.source) }}
				</div>
			</div>
		</div>
		<div class="kecheng_box">
			<div class="kecheng_box_top">
				<div class="kecheng_box_top_item" @click="baomingkecheng()">报名课程</div>
				<div class="kecheng_box_top_item" @click="baomingClassTime()">报名班级、时间</div>
			</div>
			<div class="kecheng_box_title">
				<div class="border-right"></div>
				<div>已选课程</div>
			</div>
			<div class="kecheng_list_box" v-if="courseList.length">
				<div class="kecheng_list_item" v-for="(item,i) in courseList" :key="i">
					<div class="kecheng_list_item_text1">
						<span>{{item.name}}</span>
						<span>{{item.start_time}}~{{item.end_time}}</span>
					</div>
					<div class="kecheng_list_item_text2">
						<span>报名班级</span>
						<span>{{item.className}}</span>
					</div>
					<div class="kecheng_list_item_text2">
						<span>选择课程</span>
						<select v-model="item.courseId" @change="selectKecheng(item)">
							<option :value="undefined" disabled="disabled">请选择课程</option>
							<option v-for="kechegn in item.selectedRate" :key="kechegn.id" :value="kechegn.id">
								{{kechegn.name+'-'+kechegn.price+'元'}}
							</option>
						</select>
					</div>
					<div class="kecheng_list_item_text2 kecheng_list_item_text3">
						<div class="kecheng_list_item_text2_left">
							<span>购买数量</span>
							<div class="kecheng_list_item_text3_num">
								<img src="../image/img/add_icon_blue.png" alt="" style="margin-right: 4px;"
									@click="NumChange(item,'add',i)">
								{{item.number}}
								<img src="../image/img/subtract_icon.png" alt="" style="margin-left: 4px;"
									@click="NumChange(item,'subtract',i)">
							</div>
						</div>
					</div>
					<div class="kecheng_list_item_text3_right">
						<div class="kecheng_list_item_text3_right_span">总价{{item.price*item.number}}元</div>
						<div class="kecheng_list_item_text3_right_span2">小计<input type="number"
								:placeholder="item.price*item.number" v-model="item.subtotal">元</div>
					</div>
					<img class="delCourse" src="../image/img/quxiao2.png" alt="" @click="delCourse(i)">
				</div>
			</div>
			<div class="kecheng_list_box" v-else>
				<div class="nulldata">
					请报名课程
				</div>
			</div>
			<div class="allnum">应付金额￥<span>{{allNum}}</span>元</div>
		</div>
		<div class="footer_box">
			<div class="footer_box_itme">
				<div class="footer_box_itme_top">
					<div class="border-right"></div>
					<div>收款日期</div>
				</div>
				<input class="select_date" v-model="form.start_time" type="date">
			</div>
			<div class="footer_box_itme">
				<div class="footer_box_itme_top">
					<div class="border-right"></div>
					<div>业绩归属人</div>
				</div>
				<input class="select_date2" type="text" v-model="form.type" placeholder="请输入名字">
			</div>
			<div class="footer_box_itme  footer_box_itme2">
				<div class="footer_box_itme_top">
					<div class="border-right"></div>
					<div>备注信息</div>
				</div>
				<textarea name="studentRemark" data-vv-as="备注信息" v-model="form.remark" placeholder="请输入备注信息"
					class="layui-textarea text" rows="4"></textarea>
			</div>
			<div class="baoming" @click="baomingBtn()">
				立即报名
			</div>
		</div>
		<div class="mask_layer" v-show="mask1">
			<div class="mask_item">
				<div class="mask_item_title">报名班级、时间</div>
				<div class="mask_item_content">
					<div class="mask_item_content_item1">
						<div class="content_item1_left">报名班级</div>
						<select v-model="classTime.classesId">
							<option :value="undefined" disabled="disabled">请选择班级</option>
							<option v-for="item in classList" v-text="item.name" :key="item.id" :value="item.id">
							</option>
						</select>
					</div>
					<div class="mask_item_content_item1">
						<div class="content_item1_left">开课日期</div>
						<input type="date" placeholder="请选择日期" v-model="classTime.time1">
					</div>
					<div class="mask_item_content_item1">
						<div class="content_item1_left">课程有效期至</div>
						<input type="date" placeholder="请选择时间" v-model="classTime.time2">
					</div>
				</div>
				<div class="confirmbtn1" @click="confirmbtn1()">
					确定
				</div>
				<div class="cancel" @click="mask1=false"></div>
			</div>
		</div>
		<div class="mask_layer" v-show="mask2">
			<div class="mask_item">
				<div class="mask_item_title">全部课程</div>
				<div class="mask_item_content">
					<div class="mask_item_kechegn" :class="{'checkedbtn':item.id==course.id}"
						v-for="(item,i) in kechengList" :key="i" @click="kechengChange(item)">
						<div class="mask_item_kechegn_title">
							{{item.name}}
						</div>
						<div class="mask_item_kechegn_text_box">
							<div class="mask_item_kechegn_text1">
								课程类型：{{ item.type==1?'一对一':'一对多'}}
							</div>
							<div class="mask_item_kechegn_text2">
								收费方式：{{item.classHour&& item.classHour.length > 0?'按课时/':''}}
								{{item.dailyRate&&item.dailyRate.length > 0?'按天/':''}}
								{{item.month&& item.month.length > 0?'按月':''}}
							</div>
							<div class="mask_item_kechegn_text2 mask_item_kechegn_text3">
								<p v-for="keshi in item.classHour">
									{{keshi.name}}:<span>{{keshi.price}}</span>元/课时
								</p>
								<p v-for="keshi in item.dailyRate">
									{{keshi.name}}:<span>{{keshi.price}}</span>元/天
								</p>
								<p v-for="keshi in item.month">
									{{keshi.name}}:<span>{{keshi.price}}</span>元/月
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="confirmbtn2" @click="confirmbtn2()">
					确定
				</div>
				<div class="cancel" @click="mask2=false"></div>
			</div>
		</div>
		<div class="mask_layer mask_layer2" v-show="mask3">
			<div class="mask_item">
				<div class="mask_item_title">订单详情</div>
				<div class="mask_item_content">
					<div class="mask_item_text_box">
						<div class="mask_item_text_left">
							报名课程名称
						</div>
						<div class="mask_item_text_right">
							{{kechengName()}}
						</div>
					</div>
					<div class="mask_item_text_box">
						<div class="mask_item_text_left">
							报名课程总数
						</div>
						<div class="mask_item_text_right mask_item_text_right2">
							共{{courseList.length}}门
						</div>
					</div>
					<div class="mask_item_text_box">
						<div class="mask_item_text_left">
							收款日期
						</div>
						<div class="mask_item_text_right mask_item_text_right2">
							{{form.start_time}}
						</div>
					</div>
					<div class="mask_item_text_box">
						<div class="mask_item_text_left">
							业绩归属人
						</div>
						<div class="mask_item_text_right mask_item_text_right2">
							{{form.type}}
						</div>
					</div>
					<div class="mask_item_text_box">
						<div class="mask_item_text_left">
							备注信息
						</div>
						<div class="mask_item_text_right mask_item_text_right2">
							{{form.remark}}
						</div>
					</div>
					<div class="bordera"></div>
					<div class="shuoming">
						注：核对支付信息无误后请及时付款，避免订单超时支付对您造成不便，感谢您的光临和支持
					</div>
					<div class="qr-border">
						<div class="q-img" id="qrcode" ref="qrcode">
						</div>
					</div>
					<div class="order_price">
						订单金额<span>￥</span><span>{{allNum}}</span>
					</div>
				</div>
				<div class="cancel cancel2" @click="clearMask3()"></div>
			</div>
		</div>
	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var schoolId = getPerson().schoolId;
		var mysetInterval;
		new Vue({
			el: '#vue-root',
			data: {
				mask1: false,
				mask2: false,
				mask3: false,
				student: {},//学生信息
				teacher: null,//老师信息
				classTime: {
					time1: dayjs().format('YYYY-MM-DD'),
					time2: ((dayjs().add(1, 'month').subtract(1, 'day'))).format('YYYY-MM-DD')
				},//报名班级、时间
				classList: [],//班级列表
				kechengList: [],//全部课程
				courseList: [],//已选课程列表
				course: {},//选中的课程
				form: {},
				qrimg: '',//二维码
			},
			created: function () {
				const storedStudent = localStorage.getItem('selectedStudent');
				if (storedStudent) {
					this.student = JSON.parse(storedStudent);
				}
				this.teacher = getTeacher();
			},

			methods: {
				getImg: function (pic) {
					if (!pic) return '../image/img/user.jpg';
					return '/static/' + this.teacher.schoolId + '/student/' + pic;
				},
				getSourceText: function (source) {
					switch (source) {
						case 1: return '电话邀约';
						case 2: return '上门咨询';
						case 3: return '已选址未装修';
						case 4: return '转介绍';
						case 5: return '地推数据';
						case 6: return '家长分享';
						case 7: return '美团转化';
						default: return '其他';
					}
				},
				getStatusText: function (status) {
					switch (status) {
						case 1: return '待跟进';
						case 2: return '跟进中';
						case 3: return '到访';
						case 4: return '体验学员';
						case 5: return '正式学员';
						case 6: return '已失效';
						case 7: return '无效';
						default: return '其他';
					}
				},
				getAge: function (birthday) {
					const birthDate = new Date(birthday);
					const ageDifMs = Date.now() - birthDate.getTime();
					const ageDate = new Date(ageDifMs);
					return Math.abs(ageDate.getUTCFullYear() - 1970);
				},
				//报名课程
				baomingkecheng() {
					this.course = {}
					axios.get('/t/course/list/' + this.teacher.schoolId + '?name=').then(function (res) {
						this.kechengList = res.data.list
						this.mask2 = true
					}.bind(this));
				},
				//报名班级、时间
				baomingClassTime() {
					if (this.isEmpty(this.course)) {
						return alert('请选择报名课程')
					}
					axios.get('/t/classes/allName/' + this.course.id).then(function (res) {
						this.classList = res.data
					}.bind(this));
					this.mask1 = true
				},
				//选择课程
				selectKecheng(item) {
					for (let i = 0; i < item.selectedRate.length; i++) {
						if (item.courseId == item.selectedRate[i].id) {
							item.price = item.selectedRate[i].price
							item.number = item.selectedRate[i].number
						}
					}
				},
				//数量变化
				NumChange(item, text, index) {
					var array = this.courseList
					if (array[index].classesId == item.classesId && text == 'add') {
						item.number += 1
					}
					if (array[index].classesId == item.classesId && text == 'subtract') {
						if (this.courseList[index].number == 1) return;
						item.number -= 1
					}
				},
				//删除
				delCourse(i) {
					this.courseList.splice(i, 1);
				},
				confirmbtn1() {
					if (!this.classTime.classesId || !this.classTime.time1 || !this.classTime.time2) {
						return alert('请填写完整')
					}
					const newEntries = [...this.course.month, ...this.course.dailyRate, ...this.course.classHour];
					const initialRate = newEntries.length > 0 ? newEntries[0] : null;
					this.courseList.push({
						name: this.course.name,
						className: this.classNames(this.classTime.classesId),
						classList: this.classList,
						selectedRate: newEntries,
						selectedRateId: this.course.id,
						number: Number(initialRate.number),
						price: initialRate.price,
						start_time: this.classTime.time1,
						end_time: this.classTime.time2,
						classesId: this.classTime.classesId,
						courseId: initialRate.id,
					});
					this.mask1 = false

				},
				confirmbtn2() {
					if (this.isEmpty(this.course)) {
						return alert('请选择课程')
					}
					this.mask2 = false
				},
				kechengChange(item) {
					this.course = item
					if (item.month && item.month.length > 0) {
						//type: 1为按月  2为按天  3为按课时
						for (let i = 0; i < item.month.length; i++) {
							item.month[i].type = 1
						}
					}
					if (item.dailyRate && item.dailyRate.length > 0) {
						//type: 1为按月  2为按天  3为按课时
						for (let i = 0; i < item.dailyRate.length; i++) {
							item.dailyRate[i].type = 2
						}
					}
					if (item.classHour && item.classHour.length > 0) {
						//type: 1为按月  2为按天  3为按课时
						for (let i = 0; i < item.classHour.length; i++) {
							item.classHour[i].type = 3
						}
					}

				},
				shuju(item) {
					var arr = []
					var obj = {}
					// var array=Array.form(item)
					console.log(item, 'item');
					for (let i in item) {
						for (let j = 0; j < item[i].selectedRate.length; j++) {
							if (item[i].courseId == item[i].selectedRate[j].id) {
								obj.courseName = item[i].selectedRate[j].name
							}
						}
						for (let j = 0; j < item[i].classList.length; j++) {
							if (item[i].classesId == item[i].classList[j].id) {
								obj.className = item[i].classList[j].name
							}
						}
						obj.end_time = item[i].end_time
						obj.start_time = item[i].start_time
						obj.number = item[i].number
						obj.courseId = item[i].selectedRateId
						arr.push(obj)
						obj = {}
					}
					return arr;
				},
				shuju2(item) {
					var arr = []
					var obj = {}

					for (let i in item) {
						for (let j = 0; j < item[i].selectedRate.length; j++) {
							if (item[i].courseId == item[i].selectedRate[j].id) {
								obj.type = item[i].selectedRate[j].type
							}
						}
						obj.classesId = item[i].classesId
						obj.endTime = item[i].end_time
						obj.startTime = item[i].start_time
						const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
						const start = new Date(item[i].start_time);
						const end = new Date(item[i].end_time);
						if (obj.type == 1) {
							const diffDays = Math.round(Math.abs((start - end) / oneDay));
							obj.number = diffDays;
							obj.countNum = diffDays;
						} else if (obj.type == 2 || obj.type == 3) {
							obj.number = Number(item[i].number);
							obj.countNum = obj.number;

						}

						obj.courseId = item[i].selectedRateId
						arr.push(obj)
						obj = {}
					}
					return arr;
				},

				//立即报名
				baomingBtn() {
					this.clearQRCodeInstance()
					if (this.courseList.length == 0) {
						return alert('请报名课程')
					}
					var obj = {
						studentId: this.student.id,
						courseIdsStr: '',
						handlingDate1: this.form.start_time,
						finalPayment1: 0,
						cent: this.allNum * 100,
						performance1: this.form.type,
						classesId: '',
						remark: this.form.remark,
						courseData: this.shuju(this.courseList),
					};
					var courseIdsStrArr = [];
					var classesIdArr = []
					for (let i in this.courseList) {
						courseIdsStrArr.push(this.courseList[i].selectedRateId)
						classesIdArr.push(this.courseList[i].classesId)
					}
					obj.courseIdsStr = JSON.stringify(courseIdsStrArr)
					obj.classesId = JSON.stringify(classesIdArr)
					axios.post('/t/order/registration', obj).then(function (res) {
						this.createQr(res.data.data)
					}.bind(this));
					console.log(obj);
					this.mask3 = true
				},
				//创建二维码
				createQr(data) {
					const qrcodeDiv = document.getElementById("qrcode");
					const qrcodeText = data.payQr
					const qrcodeOptions = {
						width: 200,
						height: 200,
					};
					this.qrimg = new QRCode(qrcodeDiv, {
						text: qrcodeText,
						...qrcodeOptions,
					});
					this.inquireOrder(data.orderId)
				},
				clearQRCodeInstance() {
					// 清除二维码实例
					if (this.qrimg) {
						this.qrimg.clear();
						this.$nextTick(() => {
							let dom = document.getElementById("qrcode")
							while (dom.firstChild) { dom.removeChild(dom.firstChild) }
						});
					}
				},
				setkecheng(orderid) {
					var enroll = this.shuju2(this.courseList)
					for (let i = 0; i < enroll.length; i++) {
						enroll[i].orderId = orderid
					}
					axios.post('/t/order/studentCourse', { id: this.student.id, enrollCourse: enroll }).then(function (res) {
						// console.log(res.data);
						if (res.data.code == 1) {
							alert('学生成功报名该课程')
							dialogVisible = false
							location.href = "./teacher_center.html";
						}
					}.bind(this));
				},
				//查询订单状态
				inquireOrder(id) {
					mysetInterval = setInterval(() => {
						axios.postForm('/t/order/order_paid', { orderId: id }).then(function (res) {
							console.log(res.data);
							if (res.data.code == 1) {
								this.setkecheng(id)
								clearInterval(mysetInterval);
								alert('支付成功')
								this.mask3 = false
								// location.href = "educational_student";
							}
						}.bind(this));
					}, 2000);
					setTimeout(() => {
						clearInterval(mysetInterval);
					}, 180000);
				},
				//赋值选择的班级名字
				classNames(id) {
					var name = ''
					for (var i = 0; i < this.classList.length; i++) {
						if (this.classList[i].id == id) {
							name = this.classList[i].name
							break;
						}
					}
					return name;
				},
				// 课程名称集合
				kechengName() {
					var nameArr = ''
					for (let i = 0; i < this.courseList.length; i++) {
						if (i == this.courseList.length - 1) {
							nameArr = nameArr + this.courseList[i].name;
						} else {
							nameArr = nameArr + this.courseList[i].name + '/';
						}
					}
					return nameArr;
				},
				//判断空对象
				isEmpty(obj) {
					for (var key in obj) {
						if (obj.hasOwnProperty(key)) {
							return false;
						}
					}
					return true;
				},
				clearMask3() {
					var result = confirm("是否取消支付");
					if (result) {
						clearInterval(mysetInterval);
						this.mask3 = false
						alert('已取消支付')
					}
				}
			},
			computed: {
				allNum() {
					var num = 0
					for (let i = 0; i < this.courseList.length; i++) {
						if (this.courseList[i].subtotal) {
							num = num + Number(this.courseList[i].subtotal)
						} else {
							num = num + (Number(this.courseList[i].price) * Number(this.courseList[i].number))
						}
					}
					return num;
				}
			}
		})
	</script>

</body>

</html>